<template>
  <div class="publish-news">
    <TitleBar title="发布信息管理" refresh />
    <!-- <div class="query">
      <el-input v-model="query" placeholder="请输入你要查询的内容" prefix-icon="el-icon-search" />
      <div class="query-sure">查询</div>
    </div> -->
    <div class="input-box">
      <div>
        <p>用户账号：</p>
        <el-input v-model="account" />
      </div>
      <div>
        <p>信息内容摘要：</p>
        <el-input v-model="abstract" />
      </div>
      <div>
        <p>发布时间：</p>
        <el-date-picker
          v-model="releaseTime"
          class="release-time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          @change="selTime"
        />
      </div>
      <div style="text-align: center;">
        <p class="screen-button" @click="screenButton">筛选</p>
      </div>
    </div>
    <div class="data-lie">
      <h1 style="margin-bottom: 20px">数据列表</h1>
      <!-- <div class="select-box">
        <div class="add-news" @click="addFormVisible = true,addMsg()">添加信息</div>
        <div>
          <el-select v-model="groupMessaging" placeholder="群发短信">
            <el-option
              v-for="item in messageSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="setLabelsValue" placeholder="设置标签">
            <el-option
              v-for="item in labelSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="value" placeholder="导入数据">
            <el-option
              v-for="item in pushSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="exportDataValue" placeholder="导出数据">
            <el-option
              v-for="item in exportData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="displayNumberValue" placeholder="显示条数">
            <el-option
              v-for="item in showNumber"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div>
          <el-select v-model="sortOrderValue" placeholder="排序方式">
            <el-option
              v-for="item in sortSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>-->
      <div class="edge" />
      <template>
        <el-table ref="multipleTable" :data="tableData" class="table-class" tooltip-effect="dark">
          <el-table-column align="center" label="用户ID">
            <template slot-scope="scope">{{ scope.row.mid }}</template>
          </el-table-column>
          <el-table-column align="center" prop="messageType" label="发布信息类型" />
          <el-table-column align="center" prop="userCount" label="用户账号" show-overflow-tooltip />
          <el-table-column align="center" prop="userName" label="用户名" show-overflow-tooltip />
          <el-table-column
            align="center"
            prop="messageAbstract"
            label="发布信息摘要"
            show-overflow-tooltip
          />
          <el-table-column align="center" prop="tel" label="电话" show-overflow-tooltip />
          <el-table-column align="center" prop="phone" label="手机" show-overflow-tooltip />
          <el-table-column align="center" prop="state" label="信息发布状态" show-overflow-tooltip />
          <!-- <el-table-column fixed="right" label="信息推送设置" align="center">
            <template>
              <div><el-button type="text">同行推送</el-button></div>
              <div><el-button type="text">全网推送</el-button></div>
            </template>
          </el-table-column>-->
          <el-table-column fixed="right" label="操作" align="center">
            <template slot-scope="scope">
              <!-- <div><el-button type="text" @click="getEditingData(scope.row)">编辑</el-button></div> -->
              <div><el-button type="text" @click="dialogFormVisible = true,getSeeFormData(scope.row)">查看</el-button>
              </div>
              <div><el-button type="text" style="color: rgba(245,108,108,1);" @click="delInform(scope.row.messageCode)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--分页内容-->
      <pagination :pagination="pagination1" @changepage="getListData" />
    </div>
    <div class="messageBox">
      <!-- =添加发布信息 -->
      <el-dialog center :visible.sync="addFormVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">添加发布信息</p>
        </div>
        <el-form ref="form" :model="releaseForm">
          <el-form-item label="发布内容摘要：" :label-width="formLabelWidth">
            <el-input v-model="releaseForm.abstract" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布类型：" :label-width="formLabelWidth">
            <el-select v-model="typeValue" placeholder="请选择">
              <el-option
                v-for="item in typeData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布行业：" :label-width="formLabelWidth">
            <el-select v-model="industryValue" placeholder="请选择" @change="getIndustryValue">
              <el-option
                v-for="item in industryData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布分类：" :label-width="formLabelWidth">
            <el-select v-model="classValue" placeholder="请选择">
              <el-option
                v-for="item in classData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布地区:" :label-width="formLabelWidth">
            <div class="province-box">
              <el-select v-model="provinceValue" placeholder="请选择" @change="getProvinceValue">
                <el-option
                  v-for="item in provinceData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="getCityValue">
                <el-option
                  v-for="item in cityData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="areaValue" placeholder="请选择">
                <el-option
                  v-for="item in areaData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="发布内容：" :label-width="formLabelWidth">
            <el-input
              v-model="releaseForm.content"
              type="textarea"
              auto-complete="off"
              placeholder="输入发布内容，字数不超过150字"
              resize="none"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addFormVisible = false,addReleaseNews()">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 发布信息浏览 -->
      <el-dialog center :visible.sync="dialogFormVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">发布信息浏览</p>
        </div>
        <el-form ref="seeForm" :model="seeForm">
          <el-form-item label="发布内容摘要：" :label-width="formLabelWidth">
            <el-input v-model="seeForm.abstract" auto-complete="off" :disabled="true" />
          </el-form-item>
          <el-form-item label="发布类型：" :label-width="formLabelWidth">
            <el-select v-model="typeValue" placeholder="请选择" disabled>
              <el-option
                v-for="item in typeData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布行业：" :label-width="formLabelWidth">
            <el-select
              v-model="industryValue"
              placeholder="请选择"
              disabled
              @change="getIndustryValue"
            >
              <el-option
                v-for="item in industryData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布分类：" :label-width="formLabelWidth">
            <el-select v-model="classValue" placeholder="请选择" disabled>
              <el-option
                v-for="item in classData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布地区:" :label-width="formLabelWidth" disabled>
            <div class="province-box">
              <el-select v-model="provinceValue" placeholder="请选择" @change="getProvinceValue">
                <el-option
                  v-for="item in provinceData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="getCityValue">
                <el-option
                  v-for="item in cityData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="areaValue" placeholder="请选择">
                <el-option
                  v-for="item in areaData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="发布内容：" :label-width="formLabelWidth">
            <el-input
              v-model="seeForm.content"
              type="textarea"
              auto-complete="off"
              placeholder="输入发布内容，字数不超过150字"
              resize="none"
              :disabled="true"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑发布信息 -->
      <el-dialog center :visible.sync="dialogTableVisible">
        <div slot="title">
          <div class="left-icon" />
          <p class="title-name">编辑发布信息</p>
        </div>
        <el-form ref="form" :model="editForm">
          <el-form-item label="发布内容摘要：" :label-width="formLabelWidth">
            <el-input v-model="editForm.abstract" auto-complete="off" />
          </el-form-item>
          <el-form-item label="发布类型：" :label-width="formLabelWidth">
            <el-select v-model="typeValue" placeholder="请选择">
              <el-option
                v-for="item in typeData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布行业：" :label-width="formLabelWidth">
            <el-select v-model="industryValue" placeholder="请选择" @change="getIndustryValue">
              <el-option
                v-for="item in industryData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布分类：" :label-width="formLabelWidth">
            <el-select v-model="classValue" placeholder="请选择">
              <el-option
                v-for="item in classData"
                :key="item.tradeCode"
                :label="item.tradeName"
                :value="item.tradeCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="发布地区:" :label-width="formLabelWidth">
            <div class="province-box">
              <el-select v-model="provinceValue" placeholder="请选择" @change="getProvinceValue">
                <el-option
                  v-for="item in provinceData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="cityValue" placeholder="请选择" @change="getCityValue">
                <el-option
                  v-for="item in cityData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
              <el-select v-model="areaValue" placeholder="请选择">
                <el-option
                  v-for="item in areaData"
                  :key="item.areaId"
                  :label="item.areaName"
                  :value="item.areaId"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="发布内容：" :label-width="formLabelWidth">
            <el-input
              v-model="editForm.content"
              type="textarea"
              auto-complete="off"
              placeholder="输入发布内容，字数不超过150字"
              resize="none"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false,upEditing()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getReleaseNews,
  deleteData,
  choiceProvince,
  choiceCity,
  getSearchList,
  getReleaseType,
  getReleaseIndustry,
  getEditingInforma,
  getAddReleaseNews,
  editdataObtain
} from '@/api/operate.js'
export default {
  inject: ['reload'],
  data() {
    return {
      // 搜索框
      query: '',
      // 输入框
      //   用户账号
      account: '',
      //   信息内容摘要
      abstract: '',
      // 发布时间
      releaseTime: '',
      // 默认筛选选项
      lately: '不限',
      frequency: '不限',
      value: '',
      money: '不限',
      level: '不限',
      userLabel: '不限',

      // 选择器绑定值
      setLabelsValue: '',
      exportDataValue: '',
      displayNumberValue: '',
      sortOrderValue: '',
      // 选择器
      // 地区选中器绑定值
      // 省
      provinceValue: '',
      provinceData: [],
      // 市
      cityValue: '',
      cityData: [],
      // 区
      areaValue: '',
      areaData: [],
      // 发布类型
      typeValue: '',
      typeData: [],
      // 发布行业
      industryValue: '',
      industryData: [],
      // 发布分类
      classValue: '',
      classData: [],
      // 表格列表
      tableData: [],
      multipleSelection: [],
      // 弹出窗口
      dialogTableVisible: false,
      dialogFormVisible: false,
      addFormVisible: false,
      // 弹出窗口一
      // 查看发布信息
      seeForm: {
        // 摘要
        abstract: '',
        // 类型
        type: '',
        // 行业
        industry: '',
        // 地区
        region: '',
        // 分类
        classification: '',
        // 内容
        content: ''
      },
      // 添加发布信息
      releaseForm: {
        // 摘要
        abstract: '',
        // 内容
        content: ''
      },
      // 编辑发布信息
      editForm: {
        // 摘要
        abstract: '',
        // 内容
        content: ''
      },
      formLabelWidth: '120px',
      // 弹出窗口二
      options: [],
      proLength: 0,
      // 地区编码
      areaCodeValue: '',
      outMessageType: '',
      MessageCode: '',
      // 行业
      tradeVoList: '',
      // 地址
      threeAreaVOList: '',
      pagination1: {},
      // 以下未使用
      messageSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      pushSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      labelSelect: [
        {
          value: '选项1',
          label: '选中用户'
        },
        {
          value: '选项2',
          label: '全部用户'
        }
      ],
      exportData: [
        {
          value: '选项1',
          label: '选中用户'
        },
        {
          value: '选项2',
          label: '全部用户'
        }
      ],
      showNumber: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      sortSelect: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ]
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    // 获取数据
    getListData(pageNum = 1) {
      getReleaseNews({
        pageNum,
        pageSize: 5
      }).then(res => {
        for (let i = 0; i < res.data.list.length; i++) {
          // 判断发布信息类型
          if (res.data.list[i].messageType === 'd') {
            res.data.list[i].messageType = '需求'
          }
          if (res.data.list[i].messageType === 'r') {
            res.data.list[i].messageType = '资源'
          }
          if (res.data.list[i].messageType === 's') {
            res.data.list[i].messageType = '服务'
          }
          // 判断信息发布状态
          if (res.data.list[i].state === '0') {
            res.data.list[i].state = '未发布'
          }
          if (res.data.list[i].state === '1') {
            res.data.list[i].state = '已发布'
          }
        }
        this.tableData = res.data.list
        this.pagination1 = res.data
      });
    },
    // 编辑弹窗
    getEditingData(row) {
      this.dialogTableVisible = true
      this.getType()
      this.getProvince()
      this.getIndustry()
      this.editForm.abstract = row.messageAbstract // 发布内容摘要
      this.editForm.content = row.messageContent // 发布内容
      this.MessageCode = row.messageCode
      editdataObtain(this.MessageCode).then(res => {
        this.tradeVoList = res.data.messageDetail
        this.typeValue = this.tradeVoList.messageType // 类型
        this.industryValue = this.tradeVoList.tradeCode
        this.classValue = this.tradeVoList.messageClassify // 分类

        this.threeAreaVOList = res.data.threeAreaVO;
        if (this.threeAreaVOList != null) {
          // 地区
          this.provinceValue = this.threeAreaVOList.aname
          this.cityValue = this.threeAreaVOList.bname
          this.areaValue = this.threeAreaVOList.cname
        } else {
          this.provinceValue = ''
          this.cityValue = ''
          this.areaValue = ''
        }
      });
    },
    // 编辑类型 - 获取 - 发布类型
    getType() {
      getReleaseType().then(res => {
        this.typeData = res.data;
      });
    },
    // 编辑行业 - 获取 - 发布行业
    getIndustry() {
      getReleaseIndustry({
        parentId: '10d71cdec-05c5-4f2e-a203-0a5c22b0c911'
      }).then(res => {
        this.industryData = res.data;
      });
    },
    // 编辑行业 - 触发 - 发布分类
    getIndustryValue(val) {
      getReleaseIndustry({
        parentId: '9e25306c-d42f-41b8-8a7a-f674de3b3cd6'
      }).then(res => {
        this.classData = res.data;
      });
    },
    // 获取省市区
    getProvince() {
      choiceProvince().then(res => {
        this.provinceData = res.data;
      });
    },
    // 编辑省 - 触发 - 市选中器
    getProvinceValue(e) {
      choiceCity({
        parentId: e
      }).then(res => {
        this.cityData = res.data;
      });
    },
    // 编辑市 - 触发 - 区选中器
    getCityValue(e) {
      choiceCity({
        parentId: e
      }).then(res => {
        this.areaData = res.data;
      });
    },
    // 编辑 - 确认
    upEditing() {
      getEditingInforma({
        areaCode: this.areaValue, // 地区 1
        messageAbstract: this.editForm.abstract, // 发布内容摘要 1
        messageClassify: this.classValue, // 分类
        messageCode: this.MessageCode,
        messageContent: this.editForm.content, // 发布内容 1
        messageType: this.typeValue, // 类型
        tradeCode: this.industryValue // 行业 1
      }).then(res => {
        console.log(res, 20000);
        this.getListData();
      });
    },

    // 筛选后的数据
    screenButton(pageNum = 1) {
      if(this.account!=''|| this.abstract!='' || this.releaseTime.length>1){
        getSearchList({
        pageNum,
        pageSize: 6,
        userCount: this.account,
        messageAbstract: this.abstract,
        createTime: this.releaseTime[0]
      }).then(res => {
        console.log(res);
        for (let i = 0; i < res.data.list.length; i++) {
          // 判断发布信息类型
          if (res.data.list[i].messageType === 'd') {
            res.data.list[i].messageType = '需求'
          }
          if (res.data.list[i].messageType === 'r') {
            res.data.list[i].messageType = '资源'
          }
          if (res.data.list[i].messageType === 's') {
            res.data.list[i].messageType = '服务'
          }
          // 判断信息发布状态
          if (res.data.list[i].state === '0') {
            res.data.list[i].state = '未发布'
          }
          if (res.data.list[i].state === '1') {
            res.data.list[i].state = '已发布'
          }
        }
        this.tableData = res.data.list
      });
      }else{
        this.$message({
          message: '用户账号、信息摘要、发布时间允最少一项为必须项！',
          type: 'warning'
        });
      }
      
    },
    // 选择时间
    selTime(code) {
      console.log(this.releaseTime)
    },
    // 增加信息
    addReleaseNews() {
      getAddReleaseNews({
        messageAbstract: this.releaseForm.abstract,
        messageContent: this.releaseForm.content,
        messageType: this.outMessageType,
        areaCode: `${this.provinceValue}${this.cityValue}${this.areaValue}`,
        tradeCode: `${this.typeValue}${this.industryValue}${this.classValue}`,
        userCode: 'string'
      }).then(res => {
        this.getListData()
      })
    },

    // 查看信息
    getSeeFormData(res) {
      console.log(res);
      this.seeForm.abstract = res.messageAbstract
      this.seeForm.content = res.messageContent
      this.getEditdataObtain(res.messageCode)
    },
    upEditing() {
      getEditingInforma({
        messageAbstract: this.editForm.abstract,
        messageContent: this.editForm.content,
        messageType: this.outMessageType,
        areaCode: this.areaValue,
        tradeCode: this.classValue,
        messageCode: this.MessageCode
      }).then(res => {
        this.getListData(this.currentPage, this.pageSize)
      });
    },
    // 根据信息Code查询信息详情
    getEditdataObtain(a) {
      editdataObtain(a).then(res => {
        this.threeAreaVOList = res.data.threeAreaVO
        this.tradeVoList = res.data.tradeVo
        if (this.tradeVoList != null) {
          this.typeValue = this.tradeVoList.tname
          this.industryValue = this.tradeVoList.aname
          this.classValue = this.tradeVoList.cname
        } else {
          this.typeValue = '';
          this.industryValue = ''
          this.classValue = ''
        }
        if (this.threeAreaVOList != null) {
          this.provinceValue = this.threeAreaVOList.aname
          this.cityValue = this.threeAreaVOList.bname
          this.areaValue = this.threeAreaVOList.cname
        } else {
          this.provinceValue = '';
          this.cityValue = '';
          this.areaValue = '';
        }
      })
    },
    submitForm() {
      this.seeForm.abstract = this.editForm.abstract
      this.seeForm.type = this.typeValue[1]
    },
    // 删除
    delInform(id) {
      deleteData([id]).then(res => {
        this.getListData()
      })
    },
    // 以下未使用
    // 批量删除
    delAll(val) {
      deleteData(this.multipleSelection).then(res => {
        this.getListData()
      })
    },
    addMsg() {
      // this.releaseForm.abstract = ''
      // this.releaseForm.content = ''
      // this.provinceValue = []
      // this.cityValue = []
      // this.areaValue = []
      // this.typeValue = ''
      // this.industryValue = []
      // this.classValue = []
      this.getType();
      this.getProvince();
    }
  }
}
</script>
<style scoped lang="scss">
.publish-news {
  font-family: PingFang-SC-Bold;
  width: 100%;
  /*height: 100%;*/
  /*overflow: auto;*/
  padding: 0 30px 0 30px;
  margin: 16px 0;
}
.title {
  width: 100%;
  height: 37px;
  display: flex;
  flex-flow: nowrap row;
  margin: 16px 0;
  justify-content: space-between;
}
.title-left {
  height: 37px;
  display: flex;
  align-items: center;
  float: left;
}
.title-left > div {
  width: 11px;
  height: 20px;
  display: inline-block;
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
}
.title-left > p {
  margin-left: 14px;
}
.query {
  margin-bottom: 32px;
  width: 100%;
  display: flex;
  align-items: center;
}
.query-sure {
  width: 106px;
  height: 40px;
  background: rgba(72, 141, 255, 1);
  margin-left: 30px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  cursor: pointer;
}
.input-box {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  height: 104px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.screen {
  width: 100%;
  height: 240px;
  display: flex;
  margin: 50px 0;
  justify-content: space-between;
  flex-direction: column;
}
.screen > div {
  width: 100%;
  height: 32px;
}
.screen > div > p:nth-of-type(1) {
  font-size: 16px;
  line-height: 32px;
  font-weight: 500;
  margin-left: 25px;
  color: rgba(0, 51, 51, 1);
  display: inline-block;
}
.data-lie {
  position: relative;
  width: 100%;
  /*height: 913px;*/
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  padding: 26px 20px 50px 24px;
  margin-bottom: 120px;
  margin-top: 50px;
}
.data-lie > h1 {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.select-box {
  margin: 26px 0;
  width: 100%;
  height: 40px;
  display: flex;
  flex-flow: row nowrap;
}
.select-box > div {
  width: 116px;
  height: 40px;
  border-radius: 2px;
  margin-right: 40px;
}
.edge {
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: rgba(241, 241, 241, 1);
}
.screen-button {
  height: 40px;
  background: rgba(72, 141, 255, 1);
  width: 106px;
  border-radius: 4px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1) !important;
  cursor: pointer;
}
.add-news {
  background: rgba(72, 141, 255, 1);
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: 500;
  width: 120px;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  margin-bottom: 20px;
}
</style>

